<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多功能计算器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">
                <i class="fas fa-calculator text-indigo-600 mr-2"></i>
                多功能计算器
            </h1>
            <p class="text-gray-600">支持次方和四则运算</p>
        </div>

        <div class="space-y-6">
            <!-- 运算类型选择 -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-list mr-1"></i>
                    选择运算类型
                </label>
                <select id="operation" 
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                        onchange="toggleOperation()">
                    <option value="power">次方运算</option>
                    <option value="add">加法 (+)</option>
                    <option value="subtract">减法 (-)</option>
                    <option value="multiply">乘法 (×)</option>
                    <option value="divide">除法 (÷)</option>
                </select>
            </div>

            <!-- 次方运算输入 -->
            <div id="powerInputs" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-superscript mr-1"></i>
                        底数
                    </label>
                    <input type="number" 
                           id="base" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                           placeholder="请输入底数"
                           step="any">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-arrow-up mr-1"></i>
                        指数
                    </label>
                    <input type="number" 
                           id="exponent" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                           placeholder="请输入指数"
                           step="any">
                </div>
            </div>

            <!-- 四则运算输入 -->
            <div id="basicInputs" class="space-y-4 hidden">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calculator mr-1"></i>
                        第一个数
                    </label>
                    <input type="number" 
                           id="num1" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                           placeholder="请输入第一个数"
                           step="any">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-calculator mr-1"></i>
                        第二个数
                    </label>
                    <input type="number" 
                           id="num2" 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                           placeholder="请输入第二个数"
                           step="any">
                </div>
            </div>

            <button onclick="calculate()" 
                    class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition duration-200 font-medium">
                <i class="fas fa-equals mr-2"></i>
                计算结果
            </button>

            <div id="result" class="hidden">
                <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                    <div class="text-center">
                        <p class="text-sm text-gray-600 mb-1">计算结果</p>
                        <p id="resultText" class="text-2xl font-bold text-green-600"></p>
                    </div>
                </div>
            </div>

            <div id="error" class="hidden">
                <div class="bg-red-50 border border-red-200 rounded-lg p-4">
                    <div class="text-center">
                        <p class="text-sm text-gray-600 mb-1">错误</p>
                        <p id="errorText" class="text-red-600"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleOperation() {
            const operation = document.getElementById('operation').value;
            const powerInputs = document.getElementById('powerInputs');
            const basicInputs = document.getElementById('basicInputs');
            
            if (operation === 'power') {
                powerInputs.classList.remove('hidden');
                basicInputs.classList.add('hidden');
            } else {
                powerInputs.classList.add('hidden');
                basicInputs.classList.remove('hidden');
            }
            
            // 清空之前的结果
            document.getElementById('result').classList.add('hidden');
            document.getElementById('error').classList.add('hidden');
        }

        async function calculate() {
            const operation = document.getElementById('operation').value;
            let requestData = { operation };
            
            // 隐藏之前的结果
            document.getElementById('result').classList.add('hidden');
            document.getElementById('error').classList.add('hidden');
            
            try {
                if (operation === 'power') {
                    const base = document.getElementById('base').value;
                    const exponent = document.getElementById('exponent').value;
                    
                    if (base === '' || exponent === '') {
                        showError('请输入底数和指数');
                        return;
                    }
                    
                    requestData.base = parseFloat(base);
                    requestData.exponent = parseFloat(exponent);
                    
                } else {
                    const num1 = document.getElementById('num1').value;
                    const num2 = document.getElementById('num2').value;
                    
                    if (num1 === '' || num2 === '') {
                        showError('请输入两个数字');
                        return;
                    }
                    
                    requestData.num1 = parseFloat(num1);
                    requestData.num2 = parseFloat(num2);
                }
                
                const response = await fetch('/calculate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('resultText').textContent = 
                        `${data.expression} = ${data.result}`;
                    document.getElementById('result').classList.remove('hidden');
                } else {
                    showError(data.error);
                }
            } catch (error) {
                showError('计算失败，请重试');
            }
        }
        
        function showError(message) {
            document.getElementById('errorText').textContent = message;
            document.getElementById('error').classList.remove('hidden');
        }
        
        // 支持回车键计算
        document.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && (e.target.tagName === 'INPUT')) {
                calculate();
            }
        });
    </script>
</body>
</html>
